<template>
  <div>
    <CloudPagination
      show-size-changer
      :current="current"
      :total="500"
      :page-size.sync="pageSize"
      @change="changePage"
      @showSizeChange="onShowSizeChange"
    />
    <br />
    <CloudPagination
      :current="current1"
      show-size-changer
      :page-size.sync="pageSize1"
      :total="500"
      disabled
      @change="changePage"
      @showSizeChange="onShowSizeChange"
    />
  </div>
</template>
<script>
export default {
  title: '3.改变',
  data() {
    return {
      pageSize: 20,
      pageSize1: 20,
      current: 4,
      current1: 4,
    };
  },
  watch: {
    pageSize(val) {
      console.log('pageSize', val);
    },
    current(val) {
      console.log('current', val);
    },
  },
  methods: {
    onShowSizeChange(current, pageSize) {
      console.log(current, pageSize);
      this.pageSize = pageSize;
    },
    changePage(page) {
      this.current = page;
    }
  },
};
</script>